最开始用的css UI库是最常用，历史最悠久的bootstrap。 后来又接触了bulma，bulma也做得很漂亮，不过我没有把bulma用在实战中。前段时间打算改版我的粤语网站https://ykyi.net, 调研了多种技术方案，最终选中了nextjs。读nextjs官方文档时发现tailwind是nextjs默认配好的css库。这是第一次接触到tailwindcss。较之Bulma和bootstrap这些UI库给了开箱即用的很多控件，tailwind只是提供了很多css工具(css类)，用户需要用这些工具自己创建最终使用的控件。一开始会让人有点畏惧，实际使用之后，其实完全自己创建美观的UI控件也并非有那么困难。 今天用tailwind做了一个全屏的模式对话框Modal Dialog。代码实际上是从网上抄下来的。天下代码我抄你，你抄我嘛～～ HTML代码如下。 <div className=”bg-gray-200 flex items-center justify-center h-screen”> <button className=”modal-open btn btn-green”>Open Modal</button> <div className=”modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center”> <div className=”modal-overlay absolute w-full h-full bg-gray-900 opacity-50″></div> <div className=”modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto”> <div className=”modal-content py-4 text-left px-6″> <div className=”flex justify-between … Continue reading 使用tailwindcss创建一个全屏模式对话框